<template>
	<s-layout class="transfer-wrap" title="积分转账">
		<view class="transfer-container">
			<!-- 转账表单卡片 -->
			<view class="form-card">
				<!-- 转账给 -->
				<view class="form-section">
					<view class="label">转帐给</view>
					<input class="input-field" type="text" v-model="state.phone" placeholder="请输入对方手机号"
						@input="onPhoneInput" />
				</view>

				<!-- 转账积分 -->
				<view class="form-section">
					<view class="label">转帐积分</view>
					<input class="input-field" type="digit" v-model="state.score" placeholder="请输入积分"
						@input="onScoreInput" />
				</view>

				<!-- 当前积分显示 -->
				<view class="current-score">
					您的当前积分 : {{ currentScore }}
				</view>
			</view>

			<!-- 确认转账按钮 -->
			<view class="btn-wrapper">
				<button class="confirm-btn" @tap="onConfirmTransfer">确认转账</button>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
import sheep from '@/sheep';
import { computed, reactive } from 'vue';

const userInfo = computed(() => sheep.$store('user').userInfo);
const currentScore = computed(() => userInfo.value.score || 0);

const state = reactive({
	phone: '',
	score: '',
});

// 输入处理
function onPhoneInput(e) {
	state.phone = e.detail.value;
}

function onScoreInput(e) {
	state.score = e.detail.value;
}

// 确认转账
async function onConfirmTransfer() {
	if (!state.phone) {
		sheep.$helper.toast('请输入对方手机号');
		return;
	}

	if (!state.score) {
		sheep.$helper.toast('请输入积分');
		return;
	}

	if (parseFloat(state.score) <= 0) {
		sheep.$helper.toast('请输入有效的积分数');
		return;
	}

	// if (parseFloat(state.score) > currentScore.value) {
	//   sheep.$helper.toast('积分不足');
	//   return;
	// }

	try {
		// 这里可以调用转账接口
		const res = await sheep.$api.user.transScore({
			phone: state.phone,
			score: state.score,
		});
		if (res.code == 1) {
			sheep.$helper.toast('转账成功');
			// 跳转回上一页或刷新用户信息
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		} else {
			sheep.$helper.toast(res.msg);
		}

	} catch (error) {
		sheep.$helper.toast('转账失败');
		console.error(error);
	}
}
</script>

<style lang="scss" scoped>
.transfer-wrap {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.transfer-container {
	padding: 40rpx 30rpx;
	box-sizing: border-box;
}

.form-card {
	background: #fff;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 40rpx;

	.form-section {
		margin-bottom: 40rpx;

		&:last-of-type {
			margin-bottom: 30rpx;
		}

		.label {
			font-size: 28rpx;
			font-weight: 500;
			color: #333;
			margin-bottom: 20rpx;
		}

		.input-field {
			width: 100%;
			height: 88rpx;
			background-color: #f9f9f9;
			border: 1rpx solid #e0e0e0;
			border-radius: 10rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
			color: #333;
			box-sizing: border-box;
		}
	}

	.current-score {
		font-size: 26rpx;
		color: #999;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
	}
}

.btn-wrapper {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	background: #f5f5f5;
	box-sizing: border-box;

	.confirm-btn {
		width: 100%;
		height: 88rpx;
		background: #e8aa56;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
		border: none;

		&::after {
			border: none;
		}
	}
}
</style>
